<template>
  <div>
    <el-tabs v-model="taskactiveName" @tab-click="taskhandleClick">
      <el-tab-pane label="任务列表" name="first">
        <el-tabs>
          <!-- 任务列表 -->
          <el-tabs type="border-card">
            <!-- 搜索框 -->
            <el-row :gutter="20">
              <el-col :span="8"
                ><el-input
                  placeholder="请输入搜索内容"
                  v-model="taskinfo.taskquery"
                  clearable
                  @clear="loadtask"
                >
                  <el-button
                    slot="append"
                    icon="el-icon-search"
                    @click="loadtask"
                  ></el-button> </el-input
              ></el-col>
              <el-button
                @click="getTag"
                type="primary"
                class="reletask"
                icon="el-icon-edit"
                >发布任务</el-button
              >
            </el-row>
            <!-- 点击弹出任务发表框 -->

            <el-dialog title="填写任务信息" :visible.sync="dialogFormVisible">
              <el-form
                :model="ruleForm"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
                :rules="rules"
              >
                <el-form-item label="任务名称" prop="ic_name" required>
                  <el-input v-model="ruleForm.ic_name"></el-input>
                </el-form-item>
                <el-form-item label="任务描述" prop="ic_descirpt" required>
                  <el-input
                    type="textarea"
                    v-model="ruleForm.ic_descirpt"
                  ></el-input>
                </el-form-item>
                <el-form-item label="任务标签" required prop="ic_tag">
                  <el-input v-model="ruleForm.ic_tag"></el-input>
                </el-form-item>
                <el-form-item label="任务类型" prop="ic_type">
                  <el-select v-model="ruleForm.ic_type" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="任务数量" prop="ic_num" required>
                  <el-input v-model.number="ruleForm.ic_num"></el-input>
                </el-form-item>
                <el-form-item label="任务状态" prop="ic_status">
                  <el-input v-model="ruleForm.ic_status" disabled></el-input>
                </el-form-item>
                <el-form-item label="任务奖励" prop="ic_money" required>
                  <el-input v-model.number="ruleForm.ic_money"></el-input>
                </el-form-item>
                <el-form-item label="任务完成量" prop="ic_numok" >
                  <el-input v-model.number="ruleForm.ic_numok"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-checkbox v-model="checked"
                    >勾选代表同意平台协议</el-checkbox
                  >
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')"
                  >发布订单</el-button
                >
              </div>
            </el-dialog>
            <!-- 抬头v-if="taskcycle.length != 0" -->
            <el-table border stripe :data="taskcycle">
              <el-table-column type="index" label="#"></el-table-column>
              <el-table-column
                label="任务名称"
                prop="ic_name"
              ></el-table-column>
              <el-table-column
                label="发布时间"
                prop="ic_time"
              ></el-table-column>
              <el-table-column
                label="联系电话"
                prop="ic_view"
              ></el-table-column>
              <el-table-column
                label="任务状态"
                prop="ic_status"
              ></el-table-column>
              <el-table-column label="酬金" prop="ic_money"> </el-table-column>
              <el-table-column label="标签选择" prop="ic_tag">
                <template slot-scope="scope">
                  <div class="tagsip">
                    <div
                      v-for="(item, index) in scope.row.tagList"
                      :key="index"
                    >
                      <span>{{ item.tag }}</span>
                      <span v-if="index + 1 != scope.row.tagList.length">,</span
                      ><el-popover
                        ><el-tag
                          v-for="item in taskdynamicTags"
                          :key="item.tag"
                          effect="plain"
                          >{{ item.tag }}</el-tag
                        >

                        <el-button slot="reference">
                          <i class="el-icon-edit"></i>
                        </el-button>
                      </el-popover>
                    </div>
                    <!-- 任务列表编辑标签 -->
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="是否上架" prop="ic_num">
              </el-table-column>
              <el-table-column label="是否置顶" prop="ic_top">
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.ic_top"
                    @change="showtop(scope.row.id, scope.$index)"
                  >
                  </el-switch>
                </template>
              </el-table-column>
              <el-table-column width="180px">
                <template slot-scope="scope">
                  <!-- 删除，-->
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    size="mini"
                    @click="removeUserById(scope.row.id)"
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tabs>
        </el-tabs>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="taskinfo.taskcurrentpage"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="taskinfo.taskpagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tasktotal"
        >
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="订单列表" name="second">
        <el-tabs type="border-card">
          <!-- 搜索框 -->
          <el-row :gutter="20">
            <el-col :span="8"
              ><el-input
                placeholder="请输入搜索内容"
                v-model="taskinfo.taskquery"
                clearable
                @clear="loadtask"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="loadtask"
                ></el-button> </el-input
            ></el-col>
          </el-row>
          <el-table border stripe :data="taskcycle">
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column label="订单名称" prop="ic_name"></el-table-column>
            <el-table-column label="接单用户" prop="ic_name"></el-table-column>
            <el-table-column label="接单时间" prop="ic_time"></el-table-column>
            <el-table-column label="联系电话" prop="ic_view"></el-table-column>
            <el-table-column label="订单状态" prop="ic_status">
              <template slot-scope="scope">
                <div class="orderlook">
                  <span>{{ scope.row.ic_status }}</span>
                  <span @click="showMony(scope.row.id)">查看</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="订单佣金" prop="ic_money">
            </el-table-column>
            <el-table-column label="审核状态" prop="ic_money">
            </el-table-column>
            <el-table-column width="180px">
              <template slot-scope="scope">
                <!-- 删除，-->
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                  @click="removeUserById(scope.row.id)"
                ></el-button>
               <!-- 订单详情 -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="dialogVisible = true"
            ></el-button>
            <el-dialog
  title="订单详情"
  :visible.sync="dialogVisible"
  
  width="60%">
   <el-form ref="form" :model="form"  disabled label-width="80px">
  <el-form-item label="订单创建时间">
    <el-input type="text" v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="订单号">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="订单状态">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="订单发起人">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="订单接收人">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="是否完结">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="剩余完成时间">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
            <!-- 删除，-->
            <!-- <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="removeUserById(scope.row.id)"
            ></el-button> -->
              </template>
            </el-table-column>
          </el-table>
        </el-tabs>
      
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="taskinfo.taskcurrentpage"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="taskinfo.taskpagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tasktotal"
        >
        </el-pagination>
        <!-- 弹出订单状态 -->
        <el-dialog
          title="订单状态"
          :visible.sync="orderdialogVisible"
          width="30%"
        >
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in taskactivities"
              :key="index"
              :timestamp="activity.timestamp"
            >
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>

          <span slot="footer" class="dialog-footer">
            <el-button @click="orderdialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="orderdialogVisible = false"
              >确 定</el-button
            >
          </span>
        </el-dialog>
        
      </el-tab-pane></el-tabs
    >
  </div>
</template>
<script>
/**
 * 将后台返回的数据解析成自己想要的
 * el:[{value:xxx,label:xxx}]
 */
function toSelectArr(arr) {
  let endArr = [];
  arr.map((val, idx) => {
    let obj = { value: "", label: "" };
    obj.value = val;
    obj.label = val;
    endArr.push(obj);
  });
  return endArr;
}
export default {
  data() {
    return {
      form: {
          name: ''},
          //展现订单详情
      dialogVisible: false,
      
      //时间线
      taskactivities: [
        {
          content: "活动按期开始",
          timestamp: "2018-04-15",
        },
        {
          content: "通过审核",
          timestamp: "2018-04-13",
        },
        {
          content: "创建成功",
          timestamp: "2018-04-11",
        },
      ],
      taskactiveName: "first",
      options: [],
      tasktotal: 0,
      //任务分页
      taskinfo: {
        // 输入查询信息
        taskquery: "",
        // 分页码
        taskcurrentpage: 1,
        // 页码值
        taskpagesize: 2,
      },
      taskdynamicTags: [],
      tasktagshow: "",
      ic_tag: "",
      //是否置顶
      ispvalue: false,
      taskcycle: [],
      orderdialogVisible: false,
      // 弹出任务发表框
      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: "120px",
      //发布任务表单
      checked: "true",
      ruleForm: {
        ic_numok: "",
        ic_money: "",
        ic_num: "",
        ic_name: "",
        ic_descirpt: "",
        ic_tag: "",
        ic_status: 1,

        // type:'number',
      },
      //任务列表标签
      delivery: false,
      rules: {
        ic_name: [
          { required: true, message: "请输入标题名称", trigger: "blur" },
          {
            min: 3,
            max: 30,
            message: "长度在 3 到 30 个字符",
            trigger: "blur",
          },
        ],
        ic_num: [
          { required: true, message: "请填写任务数量", trigger: "blur" },
          { type: "number", message: "必须为数字值", trigger: "blur" },
        ],
        ic_descirpt: [
          { required: true, message: "请填写任务介绍", trigger: "blur" },
        ],
        ic_tag: [
          { required: true, message: "请选择任务标签", trigger: "blur" },
        ],
        ic_money: [
          { required: true, message: "请填写任务酬金", trigger: "blur" },
          { type: "number", message: "必须为数字值" },
        ],
        ic_numok: [
          { required: true, trigger: "blur" },
          { type: "number", message: "必须为数字值" },
        ],
      },
    };
  },
  created() {
    this.tasktlag();
    this.loadtask();
  },
  // mounted: async function loadtask() {
  //   const { data: res } = await this.$http.get("/admin/getAllproject", {
  //     currentpage: this.taskinfo.taskcurrentpage,
  //     taskquery: this.taskinfo.taskquery,
  //     "page-size": this.taskinfo.taskpagesize,
  //   });
  //   this.taskcycle = res.data[0].data;
  // },
  methods: {
    taskhandleClick(tab, event) {
      console.log(tab, event);
    },
    /**
     * 获取任务标签
     */
    async getTag() {
      this.dialogFormVisible = true;
      if (this.options.length != 0) return;
      let res = await this.$http.get("/admin/getTypeProject", "");
      let data = toSelectArr(res.data.data);
      console.log(data);
      this.options = data;
    },
    //标签选择
    async tasktlag() {
      const { data: res } = await this.$http.get("/admin/allTag");
      // console.log(6666, res.data);
      this.taskdynamicTags = res.data;
      this.tasktagshow = true;
    },
    //是否置顶
    showtop(id, ic_top) {
      if (ic_top) {
        ic_top = 1;
      } else {
        ic_top = 0;
      }
      const { data: res } = this.$http.post("/admin/saveProject", {
        id,
        ic_top,
      });
      console.log(res, 999999);
    },
    async showMony(id) {
      this.orderdialogVisible = true;
      const { data: res } = await this.$http.get("/admin/userDetails", {
        id,
        "page-size": 15,
        currentpage: 1,
      });
      this.monylist = res.data[0].data;
      console.log(this.monylist);
    },
    // 加载所有任务
    async loadtask() {
      const { data: res } = await this.$http.get("/admin/getAllproject", {
        // "page-size": this.taskinfo.taskpagesize,
        currentpage: this.taskinfo.taskcurrentpage,
        taskquery:this.taskinfo.taskquery
      });
      this.taskcycle = res.data[0].data;
      this.tasktotal = res.data[1].totalCount;
      this.ruleForm.ic_numok = res.data[0].data.ic_numok;
      this.ruleForm.id = res.data[0].data.id;
      console.log(res);
      console.log(6666666, this.taskcycle);
    },
    //任务分页
    handleSizeChange(newSize) {
      console.log(111111111,newSize);
      this.taskinfo.taskpagesize = newSize;
      this.loadtask();
    },
    //监听页码值改变的事件
    handleCurrentChange(newPage) {
      console.log(22222222,newPage);
      this.taskinfo.taskcurrentpage = newPage;
      this.loadtask();
    },
    //根据id删除任务
    async removeUserById(id) {
      // console.log(id, 9999999);
      const confirmResult = await this.$confirm(
        "此操作将永久删除该任务, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(async (con) => {
          let res = await this.$http.get("/admin/delByProject", {
            id,
          });
          // console.log(999999, id);
          this.$message.success("删除任务成功");
          this.loadtask();
        })
        .catch((err) => {
          this.$message.error("删除失败");
        });
    },
    //发布任务表单
    submitForm(formName) {
      this.dialogFormVisible = false;
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const res = await this.$http.post("/admin/addProject", this.ruleForm);
          this.$refs[formName].resetFields();
          console.log(res);
          this.loadtask();
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
  },
  //
  // handleClose(done) {
  //   this.$confirm("确认关闭？")
  //     .then((_) => {
  //       done();
  //     })
  //     .catch((_) => {});
  // },
  // async showEditDialog(id) {
  //     //展示编辑用户的对话框
  //     this.editDialogVisible = true;
  //     console.log(id);
  //     const { data: res } = await this.$http.get("/admin/getOneUser", { id });
  //     // console.log(99999,res)
  //     if (res.code !== 200) {
  //       return this.$message.error("用户信息查询失败");
  //     }
  //     this.end={...res.data}
  //     this.editForm = res.data;
  //     this.editDialogVisible = true;
  //   },
  //   editDialogClosed() {
  //     //监听修改用户对话框的关闭事件
  //     this.$refs.editFormRef.resetFields();
  //   },
};
</script>
<style lang="less" scoped>
.reletask {
  float: right;
}
.tagsip {
  display: flex;
}
.el-tabs {
  margin: 0px;
}
.orderlook span {
  margin: 5px;
}
.orderlook :last-child:hover {
  color: blue;
  cursor: pointer;
}

</style>